<template>
  <div>
    <HeaderPage />
    <SearchHeader></SearchHeader>
    <navPage></navPage>
    <div
      class="box"
      v-loading="loading"
      element-loading-text="拼命加载中"
      element-loading-spinner="el-icon-loading"
      element-loading-background="rgba(0, 0, 0, 0.8)"
    >
      <img src="../../assets/img/nzSupply.png" />

      <div class="base-box">
        <div class="search-box clearfix">
          <img src="../../assets/img/search.png" alt="" class="fl" />
          <input
            type="text"
            placeholder="请输入地区或商户名称"
            class="fl"
            v-model="name"
          />
          <p @click="getList(1)">搜索</p>
        </div>
        <ul>
          <li v-for="(item, index) in baseList" :key="index">
            <div class="slide product-pic fl">
              <el-carousel trigger="click" height="198px" :autoplay="false">
                <el-carousel-item
                  v-for="(itemSecond, secondIndex) in item.imgUrl"
                  :key="secondIndex"
                  class="slide-img"
                >
                  <img
                    :src="
                      baseUrl +
                      '/sys/file/showpic?id=' +
                      itemSecond
                    "
                    alt=""
                  />
                </el-carousel-item>

                <el-carousel-item
                  v-for="(itemThree, threeIndex) in item.videoArr"
                  :key="threeIndex"
                  class="slide-video"
                >
                  <video
                    :src="baseUrl + '/sys/file/showvideo?id=' + itemThree"
                    controls
                    alt=""
                  />
                </el-carousel-item>
              </el-carousel>
            </div>
            <div class="product-info fl">
              <p class="product-name">
                {{ item.userName ? item.userName : "--" }}
              </p>
              <p class="base-address">
                地址：{{ item.addr ? item.addr : "--" }}
              </p>
              <p v-show="item.detailDescribe" class="base-address" style="line-height:22px;overflow-y:auto;height:130px;">简介：{{ item.detailDescribe }}</p>
            </div>
          </li>
        </ul>
      </div>
      <div class="pagination">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageNum"
          :page-sizes="[10, 20, 30, 50]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </div>
    </div>
    <FooterPage></FooterPage>
  </div>
</template>
<script>
import HeaderPage from "../../components/head";
import SearchHeader from "../indexHome/searchHeader";
import FooterPage from "../../components/footer";
import navPage from "../../components/nav";
export default {
  components: {
    HeaderPage,
    SearchHeader,
    FooterPage,
    navPage,
  },
  data() {
    return {
      baseList: [],
      pageSize: 10,
      total: 0,
      pageNum: 1,
      name: "",
      loading: false,
    };
  },
  mounted() {
    this.getList();
  },
  methods: {
    getList(page) {
      console.log(this.baseUrl);
      this.loading = true;
      this.$http(
        "get",
        "/sys/agriculturalCapitalMerchant/findOfficalAgriCapitalMerchantListByPage.do",
        {
          pageNum: page || this.pageNum,
          pageSize: this.pageSize,
          name: this.name,
        }
      )
        .then((res) => {
          if (res.code == "0000") {
            var data = res.result;
            var rows = data.rows;

            for (var k in rows) {
              rows[k]["imgUrl"] = [];
              rows[k]["videoArr"] = [];

              if (rows[k].surfacePlot) {

                var splitList = rows[k].surfacePlot.split(",");
                for (let index = 0; index < splitList.length; index++) {
                  const element = splitList[index];
                  var elmentList = element.split(":");
                  rows[k]["imgUrl"].push(elmentList[0]);
                }
              }

              if (rows[k].videoUrl) {
                var splitList = rows[k].videoUrl.split(",");
                for (let index = 0; index < splitList.length; index++) {
                  const element = splitList[index];
                  var elmentList = element.split(":");
                  rows[k]["videoArr"].push(elmentList[0]);
                }
              }
            }
            console.log(rows);
            this.baseList = rows;
            this.total = data.total;
          }
          this.loading = false;
        })
        .catch((err) => {
          this.loading = false;
        });
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.pageSize = val;
      this.baseList=[];
      this.getList();
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.pageNum = val;
      this.baseList=[];
      this.getList();
    },
    lookDetail(index) {
      this.$router.push("/baseIntrduce/detail");
    },
  },
};
</script>
<style scoped>
.box {
  width: 1200px;
  margin: 0 auto;
  min-height: 400px;
  background: #fff;
  padding-bottom: 30px;
}
.base-box ul {
  width: 1077px;
  margin: 20px auto;
}
.base-box ul li {
  height: 238px;
  padding: 11px 18px 19px 18px;
  box-sizing: border-box;
  margin-bottom: 12px;
  border-bottom: 1px solid #ececec;
}
.base-box ul li .product-pic {
  width: 221px;
  height: 198px;
  margin-right: 50px;
  background: #ececec;
}
.base-box ul li .product-name {
  font-size: 16px;
  color: #292929;
  /* margin-top: 9px;
  margin-bottom: 16px; */
}
.base-box ul li .base-info span {
  font-size: 13px;
  color: #4a4a4a;
  margin-top: 5px;
}
.base-box ul li .base-address {
  font-size: 13px;
  color: #4a4a4a;
  margin-top: 16px;
}
.slide-video video {
  width: 100%;
  height: 100%;
}
.pagination {
  margin-left: 400px;
}
.search-box {
  margin-left: 79px;
  margin-top: 32px;
  width: 295px;

  height: 32px;
  border: 1px solid #dcdcdc;
  border-right: 0;
}
.search-box img {
  width: 20px;
  height: 20px;
  font-size: 14px;
  margin-left: 10px;
  margin-right: 10px;
  margin-top: 6px;
}
.search-box input {
  width: 206px;
  height: 32px;
  border: 0;
}
.search-box p {
  width: 45px;
  height: 30px;
  background: #f48d06;
  border-radius: 2px 0px 0px 2px;
  border: 1px solid #f48d06;

  font-size: 12px;
  line-height: 32px;
  text-align: center;
  color: #fff;
  float: left;
  cursor: pointer;
}
.search-box p:active {
  border: 0;
  background: #ee781b;
}
</style>
<style>
.slide .el-carousel__arrow {
  width: 15px;
  height: 15px;
}
.slide .el-carousel__arrow--left {
  left: 4px;
}
.slide .el-carousel__arrow--right {
  right: 4px;
}
.slide .el-carousel__button {
  width: 6px;
  height: 6px;
  background: #fff;
  border-radius: 6px;
}
.slide .el-carousel__container {
  width: 100%;
}
.slide .el-carousel__indicators--horizontal {
  width: 100%;
  text-align: center;
}
.slide .el-carousel__item {
  height: 198px;
}
.slide .el-carousel__indicator--horizontal {
  padding: 2px 4px;
}
.slide .is-active .el-carousel__button {
  background: #ee781b;
}
.slide-img img {
  width: 100%;
  height: 100%;
}
.product-info {
  width: 600px;
}
</style>
